import React, { Component } from 'react'
import { observer } from 'mobx-react';
import article from '../mobx/article';
class Article extends Component {
    UNSAFE_componentWillMount() {
        // 请求文章列表
        article.getArticleList();
    }
    render() {
        const liStyle = { display: 'flex', justifyContent: 'space-between', margin: '10px 0' }
        return (
            <div style={{ background: '#EEE', padding: 10 }}>
                <h1>mobx状态管理-类组件</h1>
                <hr />
                <ol style={{ paddingLeft: 0 }}>
                    {
                        article.articleList.map((item, index) => (
                            <li key={item.id} style={liStyle}>
                                {item.title}
                                <button onClick={() => article.removeArticle(index)}>删除</button>
                            </li>
                        ))
                    }
                </ol>
            </div>
        )
    }
}
export default observer(Article);